import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Draggable from 'react-draggable'
import { destroyDragDrop } from '_redux/actions/dragDrops'
import 'css/index/common/dragDrop.scss'

class DragDrops extends Component {
  destroy = (e) => {
    e.preventDefault()
    const id = e.target.getAttribute('id')
    this.props.destroyDragDrop(id)
  }
  render() {
    const { dragDrops: { dragDrop } } = this.props
    return dragDrop.map(dd => 
      <Draggable
        key={dd.id}
        handle='.dragDrop-title'
        defaultPosition={dd.position || {x:0, y:0} }
        bounds='body'
        offsetParent={document.body}
      >
        <div className="dragDrop" style={dd.style || {}}>
          <h3 className='dragDrop-title'>{dd.title}</h3>
          <a href="#" id={dd.id} className="dragDrop-closer" onClick={this.destroy}></a>
          <div className="dragDrop-content">
            <dd.children/>
          </div>
        </div>
      </Draggable>
    )
  }
}
DragDrops.propTypes = {
  destroyDragDrop: PropTypes.func,
  dragDrops: PropTypes.object,
}

export default connect(({dragDrops}) => ({
  dragDrops
}), dispatch => ({
  destroyDragDrop: id => dispatch(destroyDragDrop(id)),
}))(DragDrops)